<html>

<head>
    <title>组件化</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
       
       
         
        <p>{{message}}</p>
        <laji></laji>
        <my-message2>  </my-message2>
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    <script>
        const MyComponent = {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="count++">点击了{{count}}次11</button>`
        }
        const MyMessage = {
            data() {
                return {
                    count: 10
                }
            },
            template: `<div  @click="count++">点击了{{count}}次!</div>`
        }

        const momo = {
            data() {
                return {
                    count: 10
                }
            },
            template: `<div  @click="count++">点击了{{count}}次!momo</div>`
        }

        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            methods: {
                changeMessage() {
                    this.message = 'hello vue'
                }
            },
            components: {
                'my-message2':MyMessage,
               'my-component': MyComponent,
               'laji': momo
                
            },
            beforeCreate() {
                console.log('组件创建' + this.message)
            },
            created() {
                console.log('组件创建完成'+ this.message)
            },
            beforeMount() {
                console.log('组件挂载'+ this.message)
            },
            mounted() {
                console.log('组件挂载完成'+ this.message)
            },
            beforeUpdate() {
                console.log('组件更新'+ this.message)
            },
            updated() {
                console.log('组件更新完成' + this.message)
            }
        })
        app.mount('#app')
    </script>
    </script>
</body>

</html>